import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

interface ItemType {
  value: string;
  title: string;
  content: string;
  disabled: boolean;
}
@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [
    `
      .ui-card {
        width: 288px;
      }
      .ui-card p {
        word-break: break-all;
        font-size: 12px;
        line-height: 18px;
      }
      .ui-card.disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    `,
  ],
})
export class CardComponent implements OnInit {
  selected = 'a2';
  data: Array<ItemType> = [];

  ngOnInit(): void {
    for (let i = 1; i < 6; i++) {
      this.data.push({
        value: `a${i}`,
        title: `Card 00${i}`,
        content: 'This is card content',
        disabled: i === 5,
      });
    }
  }

  itemClick(event: Event, item: ItemType): void {
    if (item.disabled) {
      event.stopPropagation();
    }
  }
}
